---
title: 在你的 dApp 中採用 Rainbow 按鈕
description: 一個即插即用的圖書館，可以讓 Wagmi 支援你的 dApp 中的 Rainbow 錢包
image: guide-rainbow-button.png
---

# 在你的 dApp 中採用 Rainbow 按鈕

`RainbowButton` 元件是最簡單的方法，讓使用 `wagmi` 並偏好自定羣聯接器體驗的 dApp 支援 Rainbow Wallet，[RainbowKit](https://www.rainbowkit.com/docs/installation) 除外。

**1. 安裝 `@rainbow-me/rainbow-button` 及其必要的相依檔案**

該套件與 Next.js、React 和 Vite 相容。確保遵循必要的相依警告。

```bash
npm install @rainbow-me/rainbow-button wagmi viem@2.x @tanstack/react-query
```

**2. 設置 Wagmi 並安裝 RainbowButton**

將 `rainbowConnector` 的一個實例傳遞給 Wagmi 的 `createConfig`，並包含 `projectId` 和 `appName`，將你的應用包裹在 `RainbowButtonProvider` 中。然後嵌入 `RainbowButton` 元件。

```tsx
import '@rainbow-me/rainbow-button/styles.css';
import {
  RainbowButtonProvider,
  RainbowButton,
  rainbowConnector,
} from '@rainbow-me/rainbow-button';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'viem/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const config = createConfig({
  connectors: [
    rainbowConnector({
      appName: 'RainbowKit demo',
      projectId: 'YOUR_PROJECT_ID',
    }),
  ],
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  ssr: true,
});

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowButtonProvider>
          <RainbowButton />
        </RainbowButtonProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
```

你也可以使用 `RainbowButton.Custom` 元件進行自訂實現及樣式設計。

```tsx
<RainbowButton.Custom>
  {({ ready, connect }) => {
    return (
      <button
        type="button"
        disabled={!ready}
        onClick={connect}
      >
        Connect Rainbow
      </button>
    );
  }}
</RainbowButton.Custom>
```

**3. 這樣就完成了！**

現在你的用戶可以享受無縫連接的 Rainbow 體驗，沒有任何維護或頭疼之事。

如果你願意接納其它錢包的支援，[RainbowKit](https://www.rainbowkit.com/docs/installation)中也可以使用一個 [`WalletButton`](https://www.rainbowkit.com/docs/wallet-button) 元件。
